<template>
  <header>
    <span @click="$back"><van-icon name="arrow-left" color="#fff" size="20" /></span>
    <strong>{{ $t("language.wallet.name") }}</strong>
    <span @click="$openPage('/kefu')"><img src="@/assets/img/kefu.png" alt="" /></span>
  </header>
  <main class="main">
    <div class="head">

      <template v-if="coinType == 'BRL'">
        <img src="@/assets/img/mylrft.png" alt="" />
        <div>
          <span>BRL </span>
          <strong>{{ $dot(coininfo[coinType.toLowerCase()]['totalCoins']) }}</strong>
        </div>
      </template>
      <template v-else>
        <img src="@/assets/img/T.png" alt="" />
        <div>
          <span>USDT </span>
          <strong>{{ $dot(coininfo[coinType.toLowerCase()]['totalCoins']) }}</strong>
        </div>
      </template>

      <div class="icon" @click="remote">
        <el-icon class="elicon" :class="remoteing ? 'rotate' : ''" ref="remoteicon" color="#999" size="20">
          <Refresh />
        </el-icon>
      </div>
    </div>
    <dl>
      <dd>
        <img src="@/assets/img/w1.png" alt="" />
        <div>
          <span>{{ $t("language.wallet.money1")
            }}</span><strong>{{ $dot(coininfo[coinType.toLowerCase()]['freezeCoins']) }}</strong>
        </div>
      </dd>
      <dd>
        <img src="@/assets/img/w2.png" alt="" />
        <div>
          <span>{{ $t("language.wallet.money2") }}</span><strong>{{
      $dot(coininfo[coinType.toLowerCase()]['withdrawalCoins']) }}</strong>
        </div>
      </dd>
      <dd v-if="coinType == 'BRL'">
        <img src="@/assets/img/w3.png" alt="" />
        <div>
          <span>{{ $t("language.wallet.money3")
            }}</span><strong>{{ $dot(coininfo[coinType.toLowerCase()]['bonusCoins']) }}</strong>
        </div>
      </dd>
    </dl>
    <ul>
      <li>
        <van-button @click="$openPage('/rechange')">{{
      $t("language.wallet.btn1")
    }}</van-button>
        <van-button @click="$openPage('/withdrawal')">{{
      $t("language.wallet.btn2")
    }}</van-button>
      </li>
      <li>
        <div>
          <img src="@/assets/img/w3.png" alt="" />
          <div>
            <span>{{ $t("language.wallet.money4") }}</span><strong>
              {{ $dot(
      coininfo[coinType.toLowerCase()]['commissionCoins']) }}</strong>
          </div>
        </div>
      </li>
      <li>
        <van-button @click="initVisible2 = true">{{
      $t("language.wallet.btn3")
    }}</van-button>
        <van-button @click="initVisible2 = true">{{
      $t("language.wallet.btn4")
    }}</van-button>
      </li>
    </ul>
    <h3>{{ $t("language.wallet.title") }}</h3>
    <ol>
      <li>
        <img src="@/assets/img/mylrft.png" alt="" />
        <div class="middle">
          <span>BRL </span>
          <strong>{{ $dot(coininfo['brl']['totalCoins']) }}</strong>
        </div>
        <el-switch v-model="value1" @change="change1" class="ml-2" style="
            --el-switch-on-color: rgb(0, 144, 109);
            --el-switch-off-color: rgb(50, 53, 62);
          " />
      </li>
      <li>
        <img src="@/assets/img/t1.png" alt="" />
        <div class="middle">
          <span>USDT</span>
          <strong>{{ $dot(coininfo['usdt']['totalCoins']) }}</strong>
        </div>
        <el-switch v-model="value2" @change="change2" class="ml-2" style="
            --el-switch-on-color: rgb(0, 144, 109);
            --el-switch-off-color: rgb(50, 53, 62);
          " />
      </li>
    </ol>

    <el-dialog class="walletdialog" width="92%" top="34vh" v-model="initVisible2">
      <!-- <div class="closer" >
        <span @click="initVisible2 = false">
          <el-icon color="#b5b6c8" size="16">
            <CloseBold />
          </el-icon>
        </span>
      </div> -->

      <p>{{ $t('language.wallet.dialogtip') }}</p>
      <div>
        <van-button>{{
      $t("language.wallet.close")
    }}</van-button>
        <van-button style="background: #0a906c;color: #fff;" @click="getmoney">{{
          $t("language.wallet.sure")
          }}</van-button>
      </div>

    </el-dialog>
  </main>
</template>
<script setup lang="ts">
// const { proxy } = getCurrentInstance();
import { ref, reactive, watch, getCurrentInstance, onActivated, computed } from "vue";
const { proxy } = getCurrentInstance();
import { useStore } from "vuex";
const store = useStore();
store.commit("SET_COINTYPE", localStorage.getItem('coinType'))

let coinType = computed(() => store.state.coinType)
let coininfo = reactive({
  brl: { totalCoins: 0, freezeCoins: 0, withdrawalCoins: 0, bonusCoins: 0, commissionCoins: 0 },
  usdt: { totalCoins: 0, freezeCoins: 0, withdrawalCoins: 0, bonusCoins: 0, commissionCoins: 0 }
})
// 获取用户信息
let info = computed(() => store.state.info)
let initVisible2 = ref(false)

// 数据初始化
let initData = () => {
  proxy.$post(`/Assets/v1.0/Account`, { id: info.value.gameID }).then(({ data }) => {
    // console.log(data.data.accounts, 9);
    for (let key in data.data.accounts) {
      coininfo[key] = data.data.accounts[key]
    }
  });
}
//佣金提现
let getmoney = () => {
  initVisible2.value = false
  proxy.$post(`/Payment/v1.0/User/CommissionTransfer`, { id: info.value.gameID }).then(({ data }) => {
    // console.log(data.data.accounts, 9);
    if (data.code == 0) {
      initData()
    }
  });
}
let remoteing = ref(false);

let remote = () => {
  remoteing.value = true;
  let time = ref(null);
  if (time) {
    store.dispatch('GetUserInfo', info.value).then(({ data }) => {
      if (data.code == 0) {
        store.commit('SET_COININFO', data.data.accounts)
        localStorage.setItem('coininfo', JSON.stringify(data.data.accounts))
      }
    })
    time = setTimeout(() => {
      clearTimeout(time);

      remoteing.value = false;
    }, 2000);
  }
};
//再次打开执行
let value1 = ref(coinType.value == 'BRL' ? true : false);
let value2 = ref(coinType.value == 'BRL' ? false : true);
onActivated(() => {
  value1.value = coinType.value == 'BRL' ? true : false;
  value2.value = coinType.value == 'BRL' ? false : true;
  initData()
})

let change1 = (e) => {
  value2.value = !e
  // console.log(e ? 'BRL' : 'USDT');

  store.commit("SET_COINTYPE", e ? 'BRL' : 'USDT')
  localStorage.setItem('coinType', e ? 'BRL' : 'USDT')

}
let change2 = (e) => {
  value1.value = !e
  store.commit("SET_COINTYPE", e ? 'USDT' : 'BRL')
  localStorage.setItem('coinType', e ? 'USDT' : 'BRL')
}

</script>
<style lang="scss">
.walletdialog {
  background: #32353e;
  border-radius: 12px;

  .el-dialog__body {
    p {
      font-size: 14px;
      color: #b5bac8;
      word-spacing: 2px;
      margin-top: 30px;
      line-height: 24px;
    }

    div {
      @include flex(row, flex-end, center);
    }

    .van-button {
      border: 1px solid #0a906c;
      background: transparent;
      color: #0a906c;
      height: 32px;
      line-height: 32px;
      border-radius: 5px;
      font-size: 12px;
      margin: 20px 0 0 10px;
    }
  }





}
</style>
<style scoped lang="scss">
header {
  width: 100%;
  height: 45px;
  position: fixed;
  left: 0;
  top: 0;
  @include flex(row, space-between, center);
  background-color: rgb(36, 39, 43);
  padding: 0 20px;
  color: #fff;

  span {
    display: block;
    height: 28px;
    width: 28px;
    @include flex(row, flex-start, center);

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.main {
  background-color: #1a1a1a;
  padding: 45px 20px 90px;
  width: 100%;
  min-height: 100vh;
  background-color: rgb(26, 26, 26);

  .head {
    padding-top: 10px;
    height: 44px;
    @include flex(row, flex-start, center);

    img {
      width: 36px;
      border-radius: 18px;
      margin-right: 10px;
    }

    div {
      margin-right: 16px;
      @include flex(column, center, flex-start);

      span {
        font-size: 16px;
        color: #999;
      }

      strong {
        font-size: 16px;
        color: #fff;
      }
    }

    .icon {
      @include flex(row, flex-start, flex-end);
      height: 100%;
      margin-bottom: -5px;

      .elicon {
        transition: all 1s;
        transform-origin: center;
      }

      .rotate {
        animation: rotate 2s cubic-bezier(0.5, 0, 0.5, 1) 1;
      }

      /* 定义一个名为rotate的动画 */
      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(-360deg);
        }
      }
    }
  }

  dl {
    width: 100%;
    @include flex(row, flex-start, center);
    margin-top: 15px;

    img {
      width: 35px;
      margin: 0px 5px 0 0;
      background-color: #0a906c;
      padding: 3px;
      border-radius: 5px;
    }

    dd {
      height: 48px;
      flex: 1;
      @include flex(row, flex-start, center);

      div {
        @include flex(column, center, flex-start);

        span {
          font-size: 14px;
          color: #999;
          line-height: 16px;
        }

        strong {
          font-size: 14px;
          color: #fff;
          font-weight: normal;
        }
      }
    }

    dd+dd {
      margin-left: 5px;
    }
  }

  ul {
    width: 100%;
    margin-top: 15px;

    li:nth-child(1),
    li:nth-child(3) {
      @include flex(row, space-around, center);

      :deep(.van-button) {
        border: 1px solid #0a906c;
        background: transparent;
        color: #0a906c;
        height: 32px;
        line-height: 32px;
        border-radius: 5px;
        font-size: 12px;
      }
    }

    li:nth-child(2) {
      @include flex(row, center, center);
      margin: 15px;

      >div {
        @include flex(row, flex-start, center);

        img {
          height: 30px;
          margin-right: 5px;
          background-color: #0a906c;
          border-radius: 5px;
          padding: 3px;
        }

        div {
          @include flex(column, center, flex-start);

          span {
            font-size: 14px;
            color: #999;
            line-height: 16px;
          }

          strong {
            font-size: 14px;
            color: #fff;
            font-weight: normal;
          }
        }
      }
    }
  }

  h3 {
    font-size: 20px;
    color: #fff;
    margin: 20px 0;
  }

  ol {
    width: 100%;

    li+li {
      margin-top: 20px;
    }

    li {
      padding: 0;

      img {
        width: 36px;
        margin-right: 10px;
      }

      @include flex(row, space-between, center);

      .middle {
        flex: 1;
        @include flex(column, center, flex-start);

        span {
          font-size: 16px;
          color: #999;
        }

        strong {
          font-size: 16px;
          color: #fff;
        }
      }
    }
  }
}
</style>
